<template>
  <div class='pageHeader'>
    <div style='width:1200px;margin:0 auto;'>
      <div class='logo'>
        <a href='#'></a>
      </div>
      <div class='nav'>
        <div class='nav-item'>
        <span v-for='(v,index) in items' :key='index'>
          <a :href="v.path"  class='nav-link' target='_blank'>{{v.title}}</a>
        </span>
        </div>
      </div>
      <div class='search'>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header',
  props:{
    items: []
  }
}
</script>

<style scoped>
.pageHeader {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  height: 42px;
}

.logo {
  display: block;
  width: 150px;
  height: 41px;
  background: url("https://www.cnbeta.com/images/logo_1.png") no-repeat scroll 0 0 / 100% auto;
  float: left;
}

.nav {
  display: block;
  height: 41px;
  line-height: 41px;
  float: left;
  border-left: 1px solid #eee;
}
.nav-item{
  float: left;
  padding: 0;
  font-size: 16px;
  height:100%;
}
.nav-link{
  display: block;
  height: 41px;
  padding: 0 20px;
  color: #4b5a6b;
  font-weight: 500;
  float: left;
  text-decoration: none;
  border-right: 1px solid #eee;
}
.nav-link:hover{
  color: #4b5a6b;
}

.search {
}
</style>
